<!doctype html>
<html>
<head>
  <title>CodeMirror 2: Full Screen Editing</title>
  <link rel="stylesheet" href="../lib/codemirror.css">
  <script src="../lib/codemirror.js"></script>
  <link rel="stylesheet" href="../theme/default.css">
  <link rel="stylesheet" href="../theme/night.css">
  <script src="../mode/xml/xml.js"></script>
  <link rel="stylesheet" href="../css/docs.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

  <style type="text/css">
    .CodeMirror {
      border-top: 1px solid black;
      border-bottom: 1px solid black;
    }

    .fullscreen {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 9999;
      margin: 0;
      padding: 0;
      border: 0px solid #BBBBBB;
      opacity: 1;
    }
  </style>
</head>
<body>
<h1>CodeMirror 2: Full Screen Editing</h1>

<form><textarea id="code" name="code" rows="5">
  <dt id="option_indentWithTabs"><code>indentWithTabs (boolean)</code></dt>
  <dd>Whether, when indenting, the first N*8 spaces should be
    replaced by N tabs. Default is false.
  </dd>

  <dt id="option_tabMode"><code>tabMode (string)</code></dt>
  <dd>Determines what happens when the user presses the tab key.
    Must be one of the following:
    <dl>
      <dt><code>"classic" (the default)</code></dt>
      <dd>When nothing is selected, insert a tab. Otherwise,
        behave like the <code>"shift"</code> mode. (When shift is
        held, this behaves like the <code>"indent"</code> mode.)
      </dd>
      <dt><code>"shift"</code></dt>
      <dd>Indent all selected lines by
        one <a href="#option_indentUnit"><code>indentUnit</code></a>.
        If shift was held while pressing tab, un-indent all selected
        lines one unit.
      </dd>
      <dt><code>"indent"</code></dt>
      <dd>Indent the line the 'correctly', based on its syntactic
        context. Only works if the
        mode <a href="#indent">supports</a> it.
      </dd>
      <dt><code>"default"</code></dt>
      <dd>Do not capture tab presses, let the browser apply its
        default behaviour (which usually means it skips to the next
        control).
      </dd>
    </dl>
  </dd>

  <dt id="option_enterMode"><code>enterMode (string)</code></dt>
  <dd>Determines whether and how new lines are indented when the
    enter key is pressed. The following modes are supported:
    <dl>
      <dt><code>"indent" (the default)</code></dt>
      <dd>Use the mode's indentation rules to give the new line
        the correct indentation.
      </dd>
      <dt><code>"keep"</code></dt>
      <dd>Indent the line the same as the previous line.</dd>
      <dt><code>"flat"</code></dt>
      <dd>Do not indent the new line.</dd>
    </dl>
  </dd>

  <dt id="option_enterMode"><code>enterMode (string)</code></dt>
  <dd>Determines whether and how new lines are indented when the
    enter key is pressed. The following modes are supported:
    <dl>
      <dt><code>"indent" (the default)</code></dt>
      <dd>Use the mode's indentation rules to give the new line
        the correct indentation.
      </dd>
      <dt><code>"keep"</code></dt>
      <dd>Indent the line the same as the previous line.</dd>
      <dt><code>"flat"</code></dt>
      <dd>Do not indent the new line.</dd>
    </dl>
  </dd>

  <dt id="option_enterMode"><code>enterMode (string)</code></dt>
  <dd>Determines whether and how new lines are indented when the
    enter key is pressed. The following modes are supported:
    <dl>
      <dt><code>"indent" (the default)</code></dt>
      <dd>Use the mode's indentation rules to give the new line
        the correct indentation.
      </dd>
      <dt><code>"keep"</code></dt>
      <dd>Indent the line the same as the previous line.</dd>
      <dt><code>"flat"</code></dt>
      <dd>Do not indent the new line.</dd>
    </dl>
  </dd>

  <dt id="option_enterMode"><code>enterMode (string)</code></dt>
  <dd>Determines whether and how new lines are indented when the
    enter key is pressed. The following modes are supported:
    <dl>
      <dt><code>"indent" (the default)</code></dt>
      <dd>Use the mode's indentation rules to give the new line
        the correct indentation.
      </dd>
      <dt><code>"keep"</code></dt>
      <dd>Indent the line the same as the previous line.</dd>
      <dt><code>"flat"</code></dt>
      <dd>Do not indent the new line.</dd>
    </dl>
  </dd>

</textarea></form>
<script>

  (function () {

    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
      lineNumbers:true,
      theme:"night",
      onKeyEvent:function (i, e) {
        // Hook into F11
        if ((e.keyCode == 122 || e.keyCode == 27) && e.type == 'keydown') {
          e.stop();
          return toggleFullscreenEditing();
        }
      }
    });

    function toggleFullscreenEditing() {
      var editorDiv = $('.CodeMirror-scroll');
      if (!editorDiv.hasClass('fullscreen')) {
        toggleFullscreenEditing.beforeFullscreen = { height:editorDiv.height(), width:editorDiv.width() }
        editorDiv.addClass('fullscreen');
        editorDiv.height('100%');
        editorDiv.width('100%');
        editor.refresh();
      }
      else {
        editorDiv.removeClass('fullscreen');
        editorDiv.height(toggleFullscreenEditing.beforeFullscreen.height);
        editorDiv.width(toggleFullscreenEditing.beforeFullscreen.width);
        editor.refresh();
      }
    }

  })();
</script>

<p>Press <strong>F11</strong> (or <strong>ESC</strong> in Safari on Mac OS X) when cursor is in the editor to toggle
  full screen editing.</p>

<p><strong>Note:</strong> Does not currently work correctly in IE
  6 and 7, where setting the height of something
  to <code>100%</code> doesn't make it full-screen.</p>

</body>
</html>
